{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{% translate "Giving" %}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{% blocktranslate trimmed with month=first|date:"F Y" %}Giving in {{ month }}{% endblocktranslate %}</h1>
    <p>{% translate "Recorded by agents during calls. Match transaction IDs against the church’s mobile money and bank statements." %}</p>
  </div>
  <div class="actions">
    <a class="btn" href="{% url_with month=prev_month|date:'Y-m' %}">{{ prev_month|date:"M Y" }}</a>
    {% if next_month %}<a class="btn" href="{% url_with month=next_month|date:'Y-m' %}">{{ next_month|date:"M Y" }}</a>{% endif %}
    <a class="btn" href="{% url_with export='csv' %}">{% translate "Download (CSV)" %}</a>
    <a class="btn btn-quiet" href="{% url 'giving_by_person' %}">{% translate "Giving by person" %}</a>
  </div>
</div>

<div class="filters">
  <form method="get">
    <input type="hidden" name="month" value="{{ first|date:'Y-m' }}">
    <select name="method" aria-label="{% translate 'Medium' %}" data-autosubmit>
      <option value="">{% translate "All mediums" %}</option>
      {% for value, label in methods %}<option value="{{ value }}"{% if value == method %} selected{% endif %}>{{ label }}</option>{% endfor %}
    </select>
    <select name="purpose" aria-label="{% translate 'Transaction type' %}" data-autosubmit>
      <option value="">{% translate "All types" %}</option>
      {% for value, label in purposes %}<option value="{{ value }}"{% if value == purpose %} selected{% endif %}>{{ label }}</option>{% endfor %}
    </select>
    <noscript><button class="btn" type="submit">{% translate "Show" %}</button></noscript>
  </form>
</div>

<div class="split-even" style="margin-bottom:24px">
  <section class="panel">
    <div class="panel-head"><h2>{% translate "Total" %}</h2></div>
    <div class="money" style="font-size:2rem; font-weight:700; color:var(--night)">{{ total|tzs }}</div>
    <p class="muted small">{% blocktranslate trimmed count n=counted %}{{ n }} record{% plural %}{{ n }} records{% endblocktranslate %}</p>
    {% if by_purpose %}
    <ul class="meter" style="margin-top:14px">
      {% for row in by_purpose %}<li><span>{{ row.label }}</span><span class="track"><span class="fill sun" style="width:{{ row.share }}%"></span></span><span class="v money small">{{ row.total|tzs }}</span></li>{% endfor %}
    </ul>
    {% endif %}
  </section>
  <section class="panel">
    <div class="panel-head"><h2>{% translate "By medium" %}</h2></div>
    {% if by_method %}
    <ul class="meter">
      {% for row in by_method %}<li><span>{{ row.label }}</span><span class="track"><span class="fill" style="width:{{ row.share }}%"></span></span><span class="v money small">{{ row.total|tzs }}</span></li>{% endfor %}
    </ul>
    {% else %}<p class="muted small">{% translate "Nothing recorded this month." %}</p>{% endif %}
  </section>
</div>

{% if page.object_list %}
<div class="table-wrap">
  <table>
    <thead><tr><th>{% translate "Date" %}</th><th>{% translate "Given by" %}</th><th class="right">{% translate "Amount" %}</th><th>{% translate "Medium" %}</th><th class="hide-sm">{% translate "Transaction ID" %}</th><th class="hide-sm">{% translate "Transaction type" %}</th><th class="hide-sm">{% translate "Recorded by" %}</th></tr></thead>
    <tbody>
    {% for g in page %}
      <tr{% if g.is_cancelled %} class="cancelled"{% endif %}>
        <td class="nowrap">{{ g.given_on|date:"j M" }}</td>
        <td><a class="title" href="{{ g.contact.get_absolute_url }}">{{ g.contact.name }}</a>{% if g.note %}<div class="muted small">{{ g.note }}</div>{% endif %}
          {% if g.is_cancelled %}<div class="small esc-note">{% blocktranslate trimmed with reason=g.cancel_reason %}Cancelled: {{ reason }}{% endblocktranslate %}</div>{% else %}<a class="small" href="{% url 'donation_edit' g.pk %}">{% translate "Correct or cancel" %}</a>{% endif %}</td>
        <td class="right money nowrap">{{ g.amount|tzs }}</td>
        <td class="nowrap">{{ g.medium_label }}</td>
        <td class="hide-sm num">{{ g.reference|default:"—" }}</td>
        <td class="hide-sm">{{ g.purpose_label }}</td>
        <td class="hide-sm muted">{{ g.recorded_by.display_name|default:"—" }}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% include "_pager.html" %}
{% else %}
<div class="panel empty"><strong>{% translate "No giving recorded for this month." %}</strong>{% translate "Agents record gifts from the call screen or a contact’s page." %}</div>
{% endif %}
{% endblock %}